<!-- 分类下的文章列表 -->
<script setup>
import ArticleToc from './components/Toc.vue'
import { nextTick, ref, toRefs, watch } from 'vue'
import { useRoute } from 'vue-router'
import { render,WC } from '@/utils/markdown'
import moment from 'moment'

const route = useRoute()
const cate = route.params.category

const props = defineProps({ articleInfo: Object, preNextInfo: Object, displayFixedToc: Boolean })
const { articleInfo: info } = toRefs(props)
const articleRef = ref()
const tocLinks = ref([])
const Init = () => nextTick(() => { generateToc(), onCopy(), onToggleLN() })

Init()
watch(info, Init)

function onCopy() {
  const selects = document.getElementsByClassName('copy-action')
  for (const cur of selects) {
    cur.addEventListener('click', () => {
      const selection = window.getSelection()
      const range = document.createRange()
      range.selectNodeContents(cur.parentNode)
      selection.removeAllRanges()
      selection.addRange(range)
    })
  }
}

let isShowLN = true

function onToggleLN() {
  const selects = document.getElementsByClassName('ln-action')
  for (const cur of selects) {
    cur.addEventListener('click', toggleNL)
  }

  function toggleNL() {
    const ln = document.getElementsByClassName('line-numbers-rows')
    const pres = document.getElementsByTagName('pre')
    if (isShowLN) {
      for (const cur of pres) {
        cur.style.paddingLeft = '0'
      }
      for (const cur of ln) {
        cur.style.display = 'none'
      }
    } else {
      for (const cur of pres) {
        cur.style.paddingLeft = '40px'
      }
      for (const cur of ln) {
        cur.style.display = 'block'
      }
    }
    isShowLN = !isShowLN
  }
}

function generateToc() {
  tocLinks.value.length = 0
  let nodes = articleRef.value.querySelectorAll('h1,h2,h3,h4,h5')
  for (let i = 0; i < nodes.length; i++) {
    let node = nodes[i]
    let reg = /^H[1-6]{1}$/
    if (reg.test(node.tagName) && !node.id)
      node.id = `h-${parseInt(node.tagName.substring(1))}-${i}`
    let toc = {
      id: node.id,
      title: node.innerText,
    }
    tocLinks.value.push(toc)
  }
}

const doLike = () => { }
const doBad = () => { }
</script>

<template>
  <div class="content-wrapper">
    <div class="article-wrapper">
      <div class="article-header">
        <h1 class="article-title">{{ info?.title }}</h1>
        <div class="article-byline">
          <div class="content-info">
            <div class="tag-labels">
              <span>Tags</span>
            </div>
            <div class="word-count">
              {{ $t('common.total') + ' ' + WC(info?.content) + ' ' + $t('common.word') }}
            </div>
          </div>
          <div class="article-info">
            <div class="article-date">
              <span class="modify-mark" v-if="info?.createTime !== info?.updateTime"></span>
              {{ moment(info?.createTime).format("YYYY-MM-DD") }}
            </div>
            <div class="article-author">xcatp</div>
          </div>
        </div>
      </div>
      <article ref="articleRef" class="article-content" v-html="render(info?.content)"></article>
      <div id="article-footer" class="article-footer">
        <!-- <div class="reaction-container">
          <div class="reaction-item" @click="doLike">LIKE</div>
          <div class="reaction-item" @click="doBad">BAD</div>
        </div> -->
        <div class="doc-op-container">
          <div class="doc-op-item doc-op-prev">
            <div v-if="!preNextInfo?.prev" class="doc-op-title">{{ $t('view_article.none') }}</div>
            <RouterLink :to="`/article/${cate}/${preNextInfo?.prev?.id}`" v-show="preNextInfo?.prev">
              <div class="doc-op-title"> &lt; {{ $t('view_article.prev') }} </div>
              <div class="doc-op-subtitle"> {{ preNextInfo?.prev?.title }}</div>
            </RouterLink>
          </div>
          <div class="doc-op-item doc-op-next">
            <div v-if="!preNextInfo?.next" class="doc-op-title">{{ $t('view_article.none') }}</div>
            <RouterLink :to="`/article/${cate}/${preNextInfo?.next?.id}`" v-show="preNextInfo?.next">
              <div class="doc-op-title"> {{ $t('view_article.next') }} &gt; </div>
              <div class="doc-op-subtitle"> {{ preNextInfo?.next?.title }}</div>
            </RouterLink>
          </div>
        </div>
      </div>
    </div>
    <div class="side-container">
      <ArticleToc :tocLinks />
    </div>
    <div class="fixed-toc" :class="{ 'display-toc': displayFixedToc }">
      <ArticleToc :tocLinks />
    </div>
  </div>
</template>

<style scoped lang="scss">
.content-wrapper {
  display: grid;
  grid-template-areas: "main toc";
  grid-template-columns: 80% 20%;
  margin-bottom: 20px;

  @media screen and (max-width: 992px) {
    grid-template-areas: "main";
    grid-template-columns: 100%;
  }
}

.article-wrapper {
  background-color: var(--view-article-content-bgc);
  box-shadow: 0px 2px 6px rgba(54, 54, 54, 0.5);
  border: 1px solid var(--border-secondary);
}

.article-title {
  font-family: "Bookman Old Style", serif;
  min-height: 4.5rem;
  text-align: center;
  margin: 1.5rem 0 2rem;
  padding: 1rem 0;
  color: #00250d;
  background: var(--view-article-title-bgc);
  box-shadow: 2px 2px 6px rgba(92, 95, 97, 0.5), -2px 0px 3px rgba(92, 95, 97, 0.5);
}

.article-byline {
  display: flex;
  justify-content: space-between;
  align-content: flex-start;
  margin: 20px 0;
}

.content-info,
.article-info {
  padding: 5px;
  color: rgb(116, 120, 106);
}


.tag-labels,
.word-count {
  font-size: 1rem;
  text-align: left;
  margin-left: 2rem;
  padding-left: 5px;
  border-left: 2px solid red;
}

.modify-mark {
  &::before {
    content: "\2022";
  }
}

.article-author {
  text-align: right;
  padding-right: 2rem;
}

.article-date {
  text-align: right;
  padding-right: 2rem;
  font-size: .9rem;
  font-weight: 700;
}

.article-content {
  margin: 0 2rem 3rem;
  text-wrap: wrap;
  min-height: 450px;
  word-wrap: break-word;
  font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", "Helvetica", "Arial", sans-serif;

  &::after {
    content: "The End";
    font-family: "Bookman Old Style", serif;
    margin: 3em auto 1em;
    text-align: center;
    display: block;
    font-size: 1.5em;
    color: var(--text-01);
  }

  @media screen and (max-width: 768px) {
    margin: 0 .75rem 3rem;
  }
}

.side-container {
  margin-left: 1rem;
  background-color: var(--card-right-side-bgc);
  box-shadow: 0px 2px 6px rgba(54, 54, 54, 0.5);
  border: 1px solid var(--border-secondary);

  @media screen and (max-width: 992px) {
    display: none;
  }
}

.article-footer {
  border-top: 1px solid var(--border-secondary);
}

.reaction-container {
  display: flex;
  justify-content: center;
  margin: 10px;
}

.reaction-item {
  margin: 0 10px;
  padding: 5px 10px 5px 10px;
  border: 1px solid var(--border-secondary);
  border-radius: 1px;
  cursor: pointer;
  transition: all 0.1s ease-in-out 0s;

  &:hover {
    background: var(--bgc-01);
  }
}

.doc-op-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.doc-op-item {
  border-top: 1px solid var(--border-secondary);
  padding: 10px 20px;
  flex-grow: 1;
  min-width: 150px;
}

.doc-op-title {
  color: var(--text-03);
}

.doc-op-subtitle {
  margin-top: 2px;
  font-size: 1.4rem;
  color: var(--text-02);

  &:hover {
    text-decoration: underline;
  }
}

.doc-op-prev,
.doc-op-next {
  display: flex;
  flex-direction: column;
}

.doc-op-prev {
  text-align: left;
  align-items: start;
}

.doc-op-next {
  text-align: right;
  align-items: end;
}

.title-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 2rem 1rem;
}

.fixed-toc {
  position: fixed;
  top: 0;
  left: -300px;
  width: 25%;
  min-width: 200px;
  height: 100%;
  z-index: 990;
  transition: left .3s ease-out;
  background-color: var(--card-right-side-bgc);
  box-shadow: 2px 2px 6px rgba(45, 64, 55, 0.5);

  @media screen and (min-width: 992px) {
    display: none;
  }
}

.display-toc {
  left: 0;
}
</style>
